import React from 'react';

import { Alert, DatePicker, Form, Input, Modal } from 'antd';
import moment from 'moment';

import { useRequest } from '@/hooks';
import { applyUpdateEntryDate } from '@/pages/EntryManage/services';

function disabledDate(current) {
    return (
        current &&
        current <
            moment()
                .add(-1, 'days')
                .endOf('day')
    );
}

// 修改入职时间弹窗
const EntryDateModal = ({ oldEntryDate, entryPersonnelCode, setLoading, form, onOk, ...rest }) => {
    const { getFieldDecorator } = form;

    // 修改入职时间
    const { run: runApplyUpdateEntryDate } = useRequest(param => applyUpdateEntryDate(param), { manual: true });

    return (
        <Modal
            title="修改入职时间"
            width={640}
            okText="提交"
            onOk={() => {
                form.validateFields(async (err, values) => {
                    const { applyEntryDate } = values;
                    if (!err) {
                        setLoading(true);
                        const res =
                            (await runApplyUpdateEntryDate({
                                ...values,
                                entryPersonnelCode,
                                applyEntryDate: moment(applyEntryDate).format('YYYY-MM-DD')
                            })) || {};

                        setLoading(false);
                        if (onOk) {
                            onOk(res, form);
                        }
                    }
                });
            }}
            {...rest}
        >
            <Form labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                <Alert
                    message="提交后将通知HR，最终入职时间将通过邮件再次通知您"
                    type="warning"
                    showIcon
                    style={{ border: 0, margin: '-12px' }}
                />
                <Form.Item label="原入职日期" style={{ margin: '16px 0 16px' }}>
                    {oldEntryDate ? moment(oldEntryDate).format('YYYY-MM-DD') : '-'}
                </Form.Item>
                <Form.Item label="期望入职日期">
                    {getFieldDecorator('applyEntryDate', {
                        rules: [
                            {
                                required: true,
                                message: '请选择'
                            }
                        ]
                    })(<DatePicker disabledDate={disabledDate} />)}
                </Form.Item>
                <Form.Item label="修改原因">
                    {getFieldDecorator('applyReason', {
                        rules: [
                            {
                                required: true,
                                message: '不能为空'
                            },
                            {
                                max: 1000,
                                message: '不能超过1000个字符'
                            }
                        ]
                    })(<Input.TextArea rows={4} placeholder="请输入" maxLength={1000} />)}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(EntryDateModal);
